<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        body {
            font-size: 15px;
            font-family: "Microsoft YaHei";
        }
        
        .bule {
            border-color: #ABFEFE;
        }
        
        .font1 {
            color: #666;
        }
        
        span {
            font-size: 12px;
            color: red;
        }
    </style>


</head>

<body id="mybd">

    <script>
        window.onload = function() {
            // 绑定 myus 
            myspelt = document.getElementById("myspan")
            pwd = document.getElementById("pwdsp")
            var myuselt = document.getElementById("myus")
                // 失去焦点 myusbl 绑定blur事件
            myuselt.onblur = function() {
                    // 失去焦点验证
                    // 获取用户名
                    var username = myuselt.value
                        // 去掉前后空白 trim()方法
                    username = username.trim()
                        // 若不合法写入span
                    if (username == "") {
                        // 绑定myspan
                        myspelt.innerHTML = "用户名不能为空"
                    } else {
                        // 用户名不为空 验证长度是否为6-12位之间
                        if (username.length < 6 | username.length > 12) {

                            myspelt.innerHTML = "用户名长度必须为6-12位之间"
                        } else {
                            // 验证是否有特殊字符 正则表达式
                            var regExp = /^[a-zA-Z0-9]+$/
                            var ok = regExp.test(username)
                            if (ok) {
                                // 合法
                                myspelt.innerHTML = ""
                            } else {
                                // 不合法
                                myspelt.innerHTML = "用户名只能有数字和字母组成"

                            }
                        }
                    }
                }
                // 获得焦点：清空span的错误信息
            myuselt.onfocus = function() {
                myspelt.innerHTML = ""
            }

            var mmpw = document.getElementById('jcpw')
            var pw = document.getElementById("uspwd")

            pw.onblur = function() {
                // 失去焦点验证
                if (pw.value == "") {
                    mmpw.innerHTML = '密码不能为空'
                } else {
                    //不为空 验证长度是否大于6位
                    if (pw.value.length < 6) {
                        mmpw.innerHTML = '密码长度不得小于6位'
                    } else {
                        var yj =  /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,})$/
                        var ok = yj.test(pw.value)
                        if (ok) {
                            console.log('密码合法')
                        } else {
                            mmpw.innerHTML = '密码必须同时包含字母和数字'
                        }
                    }
                }

            }
            pw.onfocus = function() {
                mmpw.innerHTML = ''
            }

            var yzwd = document.getElementById("cfpwd")
                // 验证密码失去焦点时
            yzwd.onblur = function() {
                // 获取密码value
                mypwd = document.getElementById("uspwd").value
                    // 获取确认密码value
                var cfpwdd = yzwd.value
                    // 进行比对
                if (mypwd != cfpwdd) {
                    pwd.innerHTML = "密码和确认密码不一致"
                } else {
                    pwd.innerHTML = ""
                }
            }
            yzwd.onfocus = function() {
                pwd.innerHTML = ""
            }


            document.getElementById("bt").onclick = function() {
                // 点击button开始验证成功将提交
                // 如果验证密码提示信息为空提交表单
                // 重点:使用JS代码怎么触发事件？？？？？
                myuselt.focus() // 触发文本框的获取焦点事件
                myuselt.blur() // 触发文本框的失去焦点事件
                pw.blur()
                pw.focus()
                    // 验证密码，怎么验证密码？让确认密码失去焦点
                yzwd.focus()
                yzwd.blur()
                    // 当所有的span都是空的 密码不为空表单合法 sumbit方法提交
                if (myspelt.innerHTML == "" && pwd.innerHTML == "" && jcpw.innerHTML == "") {
                    // form对象submit方法直接提交表单
                    document.getElementById("userform").submit()
                }
            }
            document.getElementById("mybd").onkeydown = function(x) { //x代表的是一个keydown事件对象
                // keycode获取键值 
                // 记住：键盘上回车键的键值永远都是13.ESC键的键值永远都是27.
                if (x.keyCode == 13) {
                    console.log('登录，正在进行身份认证，请稍后...')
                    myuselt.focus() // 触发文本框的获取焦点事件
                    myuselt.blur() // 触发文本框的失去焦点事件
                    pw.blur()
                    pw.focus()
                        // 验证密码，怎么验证密码？让确认密码失去焦点
                    yzwd.focus()
                    yzwd.blur()
                        // 当所有的span都是空的 密码不为空表单合法 sumbit方法提交
                    if (myspelt.innerHTML == "" && pwd.innerHTML == "" && jcpw.innerHTML == '') {
                        // form对象submit方法直接提交表单
                        document.getElementById("userform").submit()
                    }
                } else if (x.keyCode == 27) {

                    console.log("系统安全退出了！")
                }
            }

        }
    </script>


    <table width="1400" height="29" border="0" align="center">
        <tr>
            <td bgcolor="#B9EDF7"><b>用户注册</b></td>
        </tr>
    </table>
    <br><br>
    <form action="007-表单验证.html" id="userform">
        <table width="800" border="0" align="center">

            <tr>
                <th>用户名</th>
                <td><input type="text" class="bule" name="name" maxlength="7" id="myus"></td>
                <td><span id="myspan"></span><br></td>
                <td class="font1">6-12位之间（数字，字母和下划线）</td>

            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="password" class="bule" id="uspwd"></td>
                <td><span id="jcpw"></span><br></td>
                <td class="font1">最少6个字符(包含数字，字母和下划线）</td>

            </tr>
            <tr>
                <th>确认密码</th>
                <td><input type="password" class="bule" id="cfpwd"></td>
                <td><span id="pwdsp"></span></td>
            </tr>
            <tr>
                <th>性别</th>
                <td><input type="radio" value="man" name="gender" checked>男
                    <input type="radio" value="woman" name="gender">女</td>

            </tr>
            <tr>
                <th>爱好</th>
                <td>
                    <input type="checkbox" name="hobby" value="弹琴">弹琴
                    <input type="checkbox" name="hobby" value="下棋">下棋
                    <input type="checkbox" name="hobby" value="书法">书法
                    <input type="checkbox" name="hobby" value="画画">画画
                </td>
            </tr>
            <tr>
                <th>学历</th>
                <td>
                    <select name="xueli">
                    <option value="xiaoxue">小学</option>
                    <option value="chuzhong">初中</option>
                    <option value="gaozhong">高中</option>
                    <option value="daxue">大学</option>

                </select>


                </td>


            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="免费注册" id="bt"></td>
            </tr>


        </table>
    </form>




</body>

</html>